<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <script>
    function del(){
      return confirm("do you delete");
    }
  </script>
  <script src="/js/axios.min.js"></script>
</head>
<body>
<h1 th:text="thymleaf">
  hello
</h1>
<h3>add user</h3>
<form id="create">
  <input type="text" name="username"  placeholder="username" required><br>
  <input type="text" name="password" placeholder="password" required><br>
  <input type="checkbox" name="hobbies" value="Movie">movie
  <input type="checkbox" name="hobbies" value="play">play
  <input type="checkbox" name="hobbies" value="Sing">sing<br>
  <input type="submit" value="提交" ><br>
</form>
<table border="1px" id="tb">
  <tr>
    <td>编号</td>
    <td>姓名</td>
    <td>密码</td>
    <td>爱好</td>
    <td>操作</td>
  </tr>
  <tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.username}"></td>
    <td th:text="${user.password}"></td>
    <td th:text="${user.hobbies}"></td>


    <td><a th:href="@{/user/queryById/{id}(id=${user.id})}">edit</a></td>
<!--    <td><a th:href="@{'/user/removeById/' + ${user.id}}" onclick="return del()">remove</a></td>  </tr>-->
    <td><a th:href="@{/user/removeById/{id}(id=${user.id})}">remove</a></td>
</table>
</body>

<script>
  const form = document.getElementById("create");
  form.addEventListener('submit',function (event){
    event.preventDefault();//阻止表单提交
    console.log("success");

    // let username=document.getElementById("username").value;
    // let password=document.getElementById("password").value;
    // let data = {username:username,password:password};//js object
    let formData = new FormData(form);
    let data = Object.fromEntries(formData);
    let hobbies = formData.getAll('hobbies');
    console.log(hobbies)
    data={...data,hobbies:JSON.stringify(hobbies)};
    console.log(data);
    axios.post('/user/create',data).then(res=>{
      console.log("res");
    }).catch(err=>{
      console.log(err);
    }).finally(()=>{
      window.location.reload('#tb');
    })

  })
</script>
</html>